import {
  Engine,
  Scene,
  PhotoDome,
  ArcRotateCamera,
  Vector3
} from '@babylonjs/core'

const useCanvas = (canvas: HTMLCanvasElement) => {
  const engine = new Engine(canvas)
  const createScene = (name: string, url: string) => {
    const scene = new Scene(engine)
    const dome = new PhotoDome(
      name,
      url,
      {
        resolution: 32,
        size: 1000
      },
      scene
    )
    dome.imageMode = PhotoDome.MODE_MONOSCOPIC

    const camera = new ArcRotateCamera(
      'Camera',
      -Math.PI / 2,
      Math.PI / 2,
      5,
      Vector3.Zero(),
      scene
    )
    camera.attachControl(canvas, true)
    camera.inputs.attached.mousewheel.detachControl()

    return scene
  }

  return {
    engine,
    createScene
  }
}

export default useCanvas
